import PageHeaderWrapper from "@/components/PageHeaderWrapper";
import { getKnowledgeTagList, getKnowledgeTagDelete } from "@/services/knowledgeLabel";
import tableDataCheck from "@/utils/isBackPrevPage";
import { Button, Card, Form, Input, message, Modal, Table, Tag, Pagination } from "antd";
import React from "react";
import EditLabel from "./editLabel";

class LabelManage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      current: 1,
      size: 10,
      list: [],
      loading: false,
      total: 0
    }
  }

  componentDidMount() {
    this.getList()
  }

  getList = () => {
    this.setState({ loading: true }, async () => {
      const { current, size } = this.state;
      const formInfo = this.props.form.getFieldsValue();
      const res = await getKnowledgeTagList({ current, size, name: formInfo.tagName });
      // console.log(res);
      this.setState({ loading: false, list: res.records, total: res.total });
    })
  }

  queryByCondition = (current, size) => {
    this.setState({ current, size }, () => this.getList());
  }

  showTotal = (total) => {
    const { size } = this.state;
    let allPage = Math.ceil(total / size);
    return `共${allPage}页/${total}条数据`;
  }

  openDrawer = (row) => {
    this.EditLabel.onOpenDrawer(row)
  }

  confirmDelete = id => {
    const that = this;
    Modal.confirm({
      title: '是否确定删除该标签',
      okText: '确定',
      cancelText: '取消',
      okType: 'danger',
      onOk() {
        that.doDelete(id)
      }
    })
  }

  doDelete = async id => {
    const res = await getKnowledgeTagDelete({ id })
    message.info(res.msg)
    const { current, size, list } = this.state;
    const newCurrent = tableDataCheck(list, current)
    this.queryByCondition(newCurrent, size)
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { current, size, list, loading, total } = this.state;
    const columns = [
      {
        title: '标签类型',
        dataIndex: 'tagTypeValue',
        width: 150,
        align: 'center',
        render: (text, row) => {
          let color = row.tagColor.toUpperCase();
          if (color == '#FFF' || color == '#FFFFFF') {
            return text ? <Tag style={{ padding: '2px 10px' }}>{text}</Tag> : '';
          } else {
            return text ? (
              <Tag
                color={row.tagColor}
                style={{
                  padding: '5px 12px',
                  fontSize: '14px',
                  margin: 0,
                  color: row.tagColor,
                  background: row.tagColor + '1A',
                }}
              >
                {text}
              </Tag>
            ) : '';
          }
        }
      },
      {
        title: '标签值',
        // dataIndex: 'tagList',
        width: 300,
        align: 'center',
        render: (_, row) => {
          let color = row.tagColor.toUpperCase();
          if (color == '#FFF' || color == '#FFFFFF') {
            return (
              <span style={{ display: 'flex', flexFlow: 'wrap', gap: '12px', }}>
                {row.tagList && row.tagList.length > 0 && row.tagList.map((i, j) => (
                  <Tag
                    key={j}
                    color={row.tagColor}
                    style={{
                      padding: '5px 12px',
                      fontSize: '14px',
                      margin: 0,
                      color: row.tagColor,
                      background: row.tagColor + '1A',
                    }}
                  >
                    {i.tagValue}
                  </Tag>
                ))}
              </span>
            )
          } else {
            return (
              <span style={{ display: 'flex', flexFlow: 'wrap', gap: '12px', }}>
                {row.tagList && row.tagList.length > 0 && row.tagList.map((i, j) => (
                  <Tag
                    key={j}
                    color={row.tagColor}
                    style={{
                      padding: '5px 12px',
                      fontSize: '14px',
                      margin: 0,
                      color: row.tagColor,
                      background: row.tagColor + '1A',
                    }}
                  >
                    {i.tagValue}
                  </Tag>
                ))}
              </span>
            )
          }
        }
      },
      {
        title: '操作',
        width: 200,
        align: 'center',
        render: (_, row) => {
          return (
            <div>
              <Button type="primary" style={{ marginRight: 10 }} onClick={() => this.openDrawer(row)}>编辑</Button>
              <Button type="danger" onClick={() => this.confirmDelete(row.id)}>删除</Button>
            </div>
          )
        }
      }
    ];

    const addBtnStyle = { position: 'absolute', top: '50%', right: 0, transform: 'translateY(-50%)' };

    return (
      <PageHeaderWrapper>
        <Card bordered={false} style={{ height: '100%' }}>
          <div style={{ position: 'relative', marginBottom: 20 }}>
            <Form layout="inline">
              <Form.Item>
                {getFieldDecorator('tagName', { initialValue: '' })(
                  <Input placeholder="请输入标签名称" />
                )}
              </Form.Item>
              <Form.Item>
                <Button type="primary" onClick={() => this.queryByCondition(1, 10)}>查询</Button>
              </Form.Item>
            </Form>
            <Button type="primary" style={addBtnStyle} onClick={() => this.openDrawer()}>添加</Button>
          </div>

          <Table
            columns={columns}
            rowKey={'id'}
            loading={loading}
            dataSource={list}
            pagination={false}
          />
          {total > 10 ? (
            <Pagination
              style={{ textAlign: 'right', marginTop: 16 }}
              total={total}
              current={current}
              pageSize={size}
              showQuickJumper={true}
              // showSizeChanger={true}
              showTotal={this.showTotal}
              onChange={this.queryByCondition}
              // onShowSizeChange={this.queryByCondition}
            />
          ) : null}

          <EditLabel onRef={ref => this.EditLabel = ref} refreshList={() => this.queryByCondition(1, 10)} />
        </Card>
      </PageHeaderWrapper>
    )
  }
}

export default Form.create()(LabelManage);

